<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台登录页</title>
	<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css" />
	<script src="/static/js/jquery-1.10.2.min.js"></script>
	<style>
		.login-header{
			height: 64px;
			overflow: hidden;
		}
		.main{
			height: 600px;
		    background: #fff;
		    position: relative;
		    min-width: 1000px;
		}
		.main-conts{
			width: 100%;
		    height: 600px;
		    position: relative;
		    clear: both;
		    background-repeat: no-repeat;
		    background-position: center top;
		}
		.login-box{
			width: 295px;
		    height: 360px;
		    padding: 13px 14px 15px;
		    top: 76px;
		    left: 50%;
		    margin-left: 90px;
		    text-align: left;
		    position: absolute;
		    z-index: 2;
		}
		.code-inner{
			position: relative;
			
		}
		.code{
			position: absolute;
			top:0;
			right: 5px;
			cursor: pointer;
			border:1px solid #f1f1f1;
			/*width: 122px;*/
			height: auto;
		}
		.code:hover{
			border:1px solid #eee;
		}
		.code img{
			width: 100px;

		}
	</style>
</head>
<body>
	<header class="login-header">
		<div class="container">
			<h3>商城后台管理登录</h3>
		</div>
	</header>
	<section class="main" style="background-color: rgb(245, 235, 215);">
		<div class="main-conts" style="background-image: url('https://mimg.127.net/m/lc/img/LoginBackgroundPic/1214/2/promPic.jpg');"></div>
		<div class="panel panel-default login-box">
			<div class="panel-heading">管理员登录</div>
			<div class="panel-body">
				<form class="form-horizontal" action="/check" method="post">
					<div class="form-group">
						<div class="input-group">
						  <span class="input-group-addon" id="basic-addon1">
						  	 <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
						  </span>
						  <input type="text" class="form-control" placeholder="输入管理用户名" name="username" aria-describedby="basic-addon1">
						</div>						
					</div>
					<div class="form-group">
						<div class="input-group">
						  <span class="input-group-addon" id="basic-addon1">
						  	 <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
						  </span>
						  <input type="password" class="form-control" placeholder="输入密码" name="pass" aria-describedby="basic-addon1">
						</div>						
					</div>
					<div class="form-group code-inner">						
					    <!-- <div class="col-sm-7">
					      <input type="text" class="form-control" placeholder="验证码" name="code">
    					</div>
    					<div class="col-sm-5">
    						<div class="code">
    							<img id="verify_img" src="{:captcha_src()}" alt="验证码" onclick="refreshVerify()">
                			</div>
						</div> -->
						<div class="input-group col-sm-7">
						  	<span class="input-group-addon" id="basic-addon1">
						  	 	<span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
						 	</span>
						  	<input type="text" class="form-control" placeholder="验证码" name="code">						  	
						</div>
						<div class="code">
							<img id="verify_img" src="{:captcha_src()}" alt="验证码" onclick="refreshVerify()">
        				</div>				
					</div>
					<div class="form-group">
						<div class="col-sm-offset-1 col-sm-10">
						  <div class="checkbox">
						    <label>
						      <input type="checkbox" name="status"> 记住登陆状态
						    </label>
						  </div>
						</div>
					</div>					
					<div class="form-group">
						<div class="col-sm-offset-8 col-sm-10">
						  <button type="submit" class="btn btn-primary">登陆</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</section>
	<footer class="login-footer">
		<div class="container">
			<a href="">links</a>
			<a href="">links</a>
			<a href="">links</a>
			<a href="">links</a>
			<a href="">links</a>
			<a href="">links</a>
		</div>
	</footer>
</body>
<script>
	function refreshVerify(){
		var ts = Date.parse(new Date())/1000;
        $('#verify_img').attr("src", "/captcha?id="+ts);
	}
</script>
</html>